<template>
  <div class="HomeView">
    <h2 @click="handleNodeClick">{{ store.finishedTodos }}</h2>
  </div>
</template>

<script setup>
import { useStore } from '../defineStore';
import { storeToRefs } from 'pinia';
import { onMounted, reactive, ref, inject } from 'vue';
import { useRoute, useRouter } from 'vue-router/composables';
const UseRouter = useRouter();
const UseRoute = useRoute();
console.log(UseRouter);
console.log(UseRoute);
// router
// export default {
//   name: "HomeView",
//   setup() {
// 值得注意的是 useStore 是一个方法，调用之后会给我们返回一个对象。
//  这个时候，你就会发现，页面上就能正常显示我们在index.js 里面的 state 里面定义的 count 数据。
const store = useStore();
let { count } = storeToRefs(useStore());
store.$state = { current: 88 };
const color = ref('red');
const value = defineProps({
  value: Number,
});
const emits = defineEmits(['handleNodeClick']);
const handleNodeClick = (e) => {
  emits('gatewayData', 111);
};
onMounted(() => {
  store.addAge(10);
  store.$patch((state) => {
    // this.$emit('event-name', param);
  });
  const info = inject('info');
});
//     return {
//       store,
//       red
//     };
//   },
// };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
  p {
    color: v-bind(color);
  }
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
